<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/login.css">
</head>

<body>
    <h1><img src="./images/phonepic/login.jpg" alt=""></h1>
    <div class="right">
        <div class="top">
            <h1><img src="./images/logo.jpg" alt="">
            </h1>
            <p>小米账号</p>
            <ul class="nav">
                <li>用户协议</li>
                <li>隐私政策</li>
                <li>帮助中心</li>
                <li>中文简体</li>
            </ul>
        </div>
        <!-- login -->
        <div class="login">
            <!-- 登陆注册切换 -->
            <div class="login-top">
                <a href="#" class="one">登录</a>
                <a href="./reginset.html" class="two">注册</a>
                <h1><img src="./images/phonepic/code_03.png" alt=""></h1>
            </div>
            <!-- 登录验证 -->
            <input id="username" type="text" placeholder="邮箱/手机号/小米ID" /><br />
            <input id="userpass" type="password" placeholder="密码" /><br />
            <input id="btnLogin" type="button" value="登录" class="last" />
            <div id="messageBox">

            </div>

            <div class="rember">
                <a href="#">忘记密码 ?</a>
                <a href="#">手机号登录</a>
            </div>
            <div class="end-pic">
                <img src="./images/phonepic/login1_03.png" alt="">
            </div>

        </div>
        <!-- 结束 -->
        <p class="end">小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号
        </p>
    </div>
</body>

</html>
<script type="text/javascript" src="js/cookieTools.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#btnLogin").click(function () {
            $.post(
                "login.php", {
                    "username": $("#username").val(),
                    "userpass": $("#userpass").val()
                },
                function (data) {
                    if (data == "success") {
                        $("#messageBox").html("亲，恭喜您，登录成功！2秒后跳转到<a href='index.html'>首页</a>！");
                        //保存cookie：
                        saveCookie("username", $("#username").val());
                        setTimeout(() => {
                            location.href = "index.html";
                        }, 1000);
                    } else if (data == "fail") {
                        $("#messageBox").html("不好意思，亲，用户名或者密码错误！");
                    } else {
                        $("#messageBox").html("不好意思，亲，服务器出错了！");
                    }
                }
            );
        });
    });
</script>